<template>
    <view class="content">
        <view style="height: 60px;"></view>
        <view class="head">
            <image @click="toHome()" class="x" src="/static/X.svg"/>
            <view style="height: 24px;"></view>
            <view class="text" >选择币种</view>
        </view>
        <view style="height: 24px;"></view>
        <view  class="money-card" v-for="(item, index) in rateList" :key="index" @click="clickNum(index)">
            <view class="money-name" >{{ item.chName }} ({{ item.name }})</view>
            <image class="flag" mode="aspectFill" :src="item.flag" />
        </view>
    </view>
</template>
<script lang="ts" setup>
import {ref,watch} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import { useMoneyListStore } from '../stores/MoneyList';
//
const moneyList = useMoneyListStore()

console.log('index',moneyList.index);


//得到点击的数字

const position = ref()
onLoad((options)=>{
    console.log(options.type);
    position.value = options.type
    
})


function clickNum(index){

    moneyList.index = ref(index)//修改pinia
    console.log('index2',moneyList.index);
    uni.navigateBack()//跳转页面
}

//向计算页面传参


interface rateInfo{
	name:string,
	rate:number,
	flag:string,
    chName:string
	}
    // 定义一个 ref 类型的数据

let rateList:any=ref<rateInfo[]>([
	{name:'USD',rate:1,flag:'/static/USD.png',chName:'美元'},
	{name:'CNY',rate:7.2560,flag:'/static/CNY.png',chName:'人民币'},
	{name:'SGD',rate:1.3410,flag:'/static/SGD.png',chName:'新加坡元'},
	{name:'JPY',rate:151.7756,flag:'/static/JPY.png',chName:'日元'},
	{name:'EUR',rate:0.9497,flag:'/static/EUR.png',chName:'欧元'}
])
function toHome(){
	uni.navigateBack()}

//获取home传来的参数

</script>

<style>
.content{
    border-radius: 30px;
}

.x{
    width: 36px;
    height: 36px;
    margin-left: 18px;
}
.text{
    margin-left: 18px;
    font-size: 20px;
    color: #150B3D;
    font-weight: 700;
}
.flag{
	width: 35px;
	height: 35px;
	border-radius: 50%;
	overflow: hidden; 
    margin-right: 24px;
}
.money-card{
    display: flex;
    justify-content:space-between;
    align-items: center;

    box-shadow: 4px 4px 10px 10px #0000000D;

    height: 70px;
    margin-left: 24px;
    margin-right: 24px;
    border-radius: 15px;

    margin-top: 16px;
}
.money-name{
    margin-left: 24px;
    font-size: 18px;
    font-weight: 700;
    color: #150B3D;
}
</style>